<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Fize name="陈峰展1" />
    <Fize name="陈峰展2" />
    <ButtonCounter name="按钮1" />
    <ButtonCounter name="按钮2" />
    <ButtonCounter name="按钮3" />
    <News v-for="news in newses" v-bind:key="news.id" v-bind:news="news" />

    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/page1">Go to Page1</router-link>
      <br>
      <router-link to="/page2">Go to Page2</router-link>
      <br>
      <router-link to="/page3/31">Go to Page3</router-link>
      <br>
      <router-link to="/page4/31/fize">Go to Page4</router-link>
      <br>
      <router-link to="/page4/32/chan">Go to Page4 Again</router-link>
    </p>
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Fize from './components/Fize'
import ButtonCounter from './components/ButtonCounter'
import News from './components/News'
import StartLog from './mixins/StartLog'

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);


export default {
  name: 'app',
  mixins: [StartLog],
  data: function () {
    return {
      newses: [
        {
          id: 1,
          title: '测试标题1',
          content: '<p>哈哈哈<span style="color: blue;">你看看1</span></p>',
        },
        {
          id: 2,
          title: '测试标题2',
          content: '<p>哈哈哈<span style="color: blue;">你看看2</span></p>',
        },
      ]
    };
  },
  components: {
    HelloWorld,
    Fize,
    ButtonCounter,
    News
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
